<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Uni Chat ROOM!</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>

<body>
  <nav>
    <div class="nav-wrapper teal lighten-2">
      <a href="#" class="brand-logo center">Private chat room</a>
    </div>
  </nav>
  <br />
  <br />
  <div class="row">
    <!-- Conencted user list -->
    <div class="col s4">
      <h3 class="flow-text center teal-text text-lighten-1">
        Online users
      </h3>
      <ul class="collection" id="user-list"></ul>
    </div>
    <!-- Message Area -->
    <div id="chat-col" class="col s8" style="display: none">
      <div class="card blue-grey darken-1">
        <div id="messages" class="card-content white-text"></div>
        <div class="card-action white">
          <!-- Message Form -->
          <form id="message-form">
            <div class="input-field">
              <textarea type="text" id="textarea" class="materialize-textarea"></textarea>
              <label class="active" for="textarea">MESSAGE</label>
            </div>
            <div class="right-align">
              <button class="btn waves-effect waves-light btn-small" type="submit" name="action">
                Send <i class="material-icons right">send</i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- Login Area -->
    <div id="login-col" class="col s8" style="display: block">
      <div class="card">
        <div class="card-content">
          <span class="card-title teal-text text-lighten-1">
            <b>NAME？ </b>
          </span>
          <!-- Login Form -->
          <form id="login-form">
            <div class="input-field">
              <input type="text" id="name" />
              <label class="active" for="name">Nickname</label>
            </div>
            <div class="right-align">
              <button class="btn waves-effect waves-light btn-small" type="submit" name="action">
                Start chating <i class="material-icons right">chat</i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script>
  (function () {
    //Get Element
    const loginForm = document.getElementById("login-form");
    const messageForm = document.getElementById("message-form");
    const messages = document.getElementById("messages");
    const userList = document.getElementById("user-list");
    const loginCol = document.getElementById("login-col");
    const chatCol = document.getElementById("chat-col");

    //Conenct to socket.io
    var socket = io({
      timeout: 5000,
      "connect timeout": 5000
    });
    //check for connection
    if (socket !== undefined) {
      console.log("Conencted to socket...");
    }
    //Update username
    socket.on("loadUser", users => {
      userList.innerHTML = "";
      users.forEach(element => {
        let userLi = document.createElement("li");
        userLi.setAttribute("class", "collection-item");
        userLi.style = "margin:0 auto;padding:3px";
        userLi.innerHTML =
          `<h6 class="center waves-effect waves-light btn" style="width:100%">${element}</h6>`;
        userList.insertBefore(userLi, userList.lastChild);
      });
    });
    //Submit login form
    loginForm.addEventListener("submit", e => {
      e.preventDefault();
      const userName = document.getElementById("name").value;
      // Emit login
      socket.emit("login", userName, () => {
        loginCol.style = "display:none";
        chatCol.style = "display:block";
        //Add welcome message
        console.log("hh22h", userName);
        var message = document.createElement("p");
        message.setAttribute("class", "center blue-grey-text text-lighten-2");
        message.textContent = `Welcome ${userName} to the chat! `;
        messages.insertBefore(message, messages.lastElementChild);
      });
    });
    // Submit Message
    messageForm.addEventListener("submit", e => {
      e.preventDefault();
      const msg = document.getElementById("textarea").value;
      document.getElementById("textarea").value = "";
      socket.emit("chat message", msg);
    });
    //Add Message to Card
    socket.on("output", data => {
      let message = document.createElement("h6");
      message.textContent = data.name + ": " + data.msg;
      messages.appendChild(message);
      messages.insertBefore(message, messages.lastChild);
    });
    socket.on("logout", data => {
      var message = document.createElement("p");
      message.setAttribute("class", "center orange-text text-darken-3");
      message.textContent = data;
      messages.appendChild(message);
      messages.insert(message, messages.lastElementChild);
    });
  })();
</script>

</html>